<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Demo With JQuery Mobile</title>
      <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0b2.css" type="text/css" charset="utf-8" />
	  <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
	  <script type="text/javascript" src="jquery.mobile/jquery-1.6.2.min"></script>
	  <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
	  <script src="jquery.mobile/jquery.mobile-1.0b2.js"></script>
	  <script type="text/javascript" charset="utf-8" src="main.js"></script>
  
	<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
	<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />-->
	<!-- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>-->
	<!-- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>-->
	</head>
  <body onload="init();">
    <div data-role="page" data-theme="b">
  	<div data-role="header">
    	<h1>PhoneGap with JQuery Mobile</h1> 
	</div>
    <div data-role="content">
    <div data-role="collapsible" data-collapsed="true" >
    	<h1>System Info</h1>
        <div>Platform: <b><span id="platform"> &nbsp;</span></b>, Version: <b><span id="version">&nbsp;</span></b><br/>
        UUID: <b><span id="uuid"> &nbsp;</span></b>, Name: <b><span id="name">&nbsp;</span></b><br/>
        Width: <b><span id="width"> &nbsp;</span></b>, Ht: <b><span id="height">&nbsp;</span></b>, Color Depth: <b><span id="colorDepth"></span></b>
        </div>
     </div>

    <div data-role="collapsible" data-collapsed="true"  id="accelmenu">
    	<h1><div>Toggle Accelerometer</div></h1>
		<div class="ui-grid-b">
     	 	<div class="ui-block-a">X: <b id="x">&nbsp;</b></div>
     	 	<div class="ui-block-b">Y: <b id="y">&nbsp;</b></div> 
     	 	<div class="ui-block-c">Z: <b id="z">&nbsp;</b></div>
    	</div>
    </div>   
    <div data-role="collapsible" data-collapsed="true"  id="locationmenu">   
    	<h1><div>Toggle Location</div></h1>
    	<div id="loccontainer" >
    		<div id="loctext" ></div>
    		<div id="locdata" ></div>
    	</div>
    </div>
    <a href="tel://411" data-role="button">Call 411</a>
    <div data-role="button" onclick="beep();">Beep</div>
    <div data-role="button" onclick="vibrate();">Vibrate</div>
    <div data-role="button" onclick="show_pic();">Get a Picture</div>
    <div data-role="button" onclick="get_contacts();">Get Phone's Contacts</div>
    <div data-role="button" onclick="check_network();">Check Network</div>    
    <div id="viewport" class="viewport" style="display:none;">       
      <img style="width:60px;height:60px" id="test_img" src="" />
    </div> 
    </div><!-- end jqm content -->
    <div data-role="footer">
    	<h1>This file is located at assets/www/index.html</h1>
    </div>
    </div><!-- end jqm page -->
  </body>
</html>
